<script setup>
const customerList = ref([
  {
    title: '中国宝武：智能化宿舍管理，提升员工满意度',
    desc: '在寓盟团队的支持下，上海宝地宝泉房屋经营有限公司成功构建了高效的宿舍管理系统。系统涵盖企业补贴、床位视图等功能',
    icon: '/images/home/customer/baowu-icon.png',
    img: '/images/home/customer/baowu.png',
    labelList: ['公寓', '宿舍']
  },
  {
    title: '湖北保障房：独立部署，深度定制，全面提升运营效能',
    desc: '通过寓盟管家的系统，湖北省住房保障建设管理有限公司成功应对了复杂的房源管理、财务操作、多样的合同管理以及多经业务管理需求',
    icon: '/images/home/customer/baozu-icon.png',
    img: '/images/home/customer/baozufang.png',
    labelList: ['保租房']
  },
  {
    title: '联投置业：资源优化，提升城市更新板块运营能力',
    desc: '依托寓盟管家SaaS版，武汉联投置业有限公司进行了独立部署和深度定制。系统解决了复杂的房源管理、财务操作和合同管理需求',
    icon: '/images/home/customer/liantou-icon.png',
    img: '/images/home/customer/liantou.png',
    labelList: ['保租房']
  },
  {
    title: '北京首钢：智能集成，提升审批与财务管理效率',
    desc: '北京首钢通过独立部署系统，并无缝对接钉钉审批和金蝶系统，显著提升了审批效率和财务管理水平，解决了房源管理',
    icon: '/images/home/customer/shougang-icon.png',
    img: '/images/home/customer/shougang.png',
    labelList: ['公寓', '宿舍']
  },
  {
    title: '武汉城投：定制运营地图，优化运营流程',
    desc: '武汉城投通过系统的轻定制UI和运营地图功能，显著优化了日常运营流程和决策支持，提升了用户体验和管理效率',
    icon: '/images/home/customer/chengtou-icon.png',
    img: '/images/home/customer/chengtou.png',
    labelList: ['公寓']
  },
  {
    title: '中天集团：动态定价功能，增强市场竞争力',
    desc: '中天集团在标准版基础上定制开发了动态定价功能，成功应对租客服务管理、租金收取及报表分析的复杂需求',
    icon: '/images/home/customer/zhongtian-icon.png',
    img: '/images/home/customer/zhongtian.png',
    labelList: ['公寓']
  }
])
const currentIndex = ref(null)
</script>

<template>
  <section style="margin: 0 auto; margin-top: -100px" class="z-99 relative w-1200px container">
    <h2 class="text-size-40px 600 leading-56px text-center">精选客户案例</h2>
    <div class="box">
      <div v-for="(v, i) in customerList" :key="i" class="item" :class="{ 'item-animal': currentIndex == i }" @mouseover="currentIndex = i" @mouseleave="currentIndex = null">
        <img :src="v.img" alt="" class="img" />
        <div class="main">
          <div class="label">
            <div v-for="(v2, j) in v.labelList" :key="v2" class="it" :class="v2 == '公寓' ? 'gongyu' : v2 == '宿舍' ? 'sushe' : 'baozu'" :style="j == 0 ? 'margin-left:0' : ''">{{ v2 }}</div>
          </div>
          <div class="title">{{ v.title }}</div>
          <div class="desc">{{ v.desc }}</div>
          <div class="btm-area">
            <img v-if="currentIndex != i" :src="v.icon" alt="" class="icon" />
            <div class="flex justify-between mt-40px">
              <NuxtLink to="https://saas.byteox.com/#/login" class="flex justify-center items-center full-btn w-158px h-50px rounded-25px text-18px">
                <span class="text-white">免费试用</span>
              </NuxtLink>
              <NuxtLink class="white-btn w-158px h-50px leading-50px rounded-25px text-18px" style="border: 1px solid #0a87f8">预约演示</NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btm-desc">更多客户案例正在更新中...</div>
  </section>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;
}
@keyframes item-animation {
  /* 0% {
		opacity: 1;
		margin-top: 0;
	}

	100% {
		opacity: 1;
		margin-top: -40px;
	} */
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(-30px);
  }
}
.item-animal {
  animation: item-animation 1s forwards;
}
.item {
  margin-top: 60px;
  width: 376px;
  height: 540px;
  background: #ffffff;
  box-shadow: 0px 0px 20px 0px rgba(0, 119, 255, 0.1);
  border-radius: 16px;
  border: 1px solid #f2f2f2;
  overflow: hidden;
  box-sizing: border-box;
}
.img {
  width: 376px;
  height: 214px;
}
.main {
  padding: 20px;
  width: 100%;
}
.label {
  display: flex;
  width: 100%;
}
.it {
  margin: 0 4px;
  font-size: 16px;
  min-width: 32px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 2px 6px;
}
.title {
  margin-top: 18px;
  font-weight: 500;
  font-size: 20px;
  color: #111111;
  line-height: 28px;
}
.desc {
  margin-top: 10px;
  font-weight: 400;
  font-size: 16px;
  color: #777777;
  line-height: 28px;
}
.icon {
  width: 188px;
  height: 78px;
  margin-top: 20px;
  /* margin-left: 10px; */
}
.btm-desc {
  font-weight: 400;
  font-size: 18px;
  color: #999999;
  margin-top: 60px;
}
.btm-area {
  /* transition: 3s; */
}
.gongyu {
  background: #e5f9f2;
  color: #03c683;
}
.baozu {
  background: #e5f2fe;
  color: #0a87f8;
}
.sushe {
  background: #f5f0fd;
  color: #9f6eec;
}
</style>
